<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <script src="./fontawesome/js/all.min.js"></script>
  </head>
  <body>
    <h1>index</h1>
    <div>
      <button id="btnLogin">注销</button>
    </div>

    <div id="tableUsers"></div>

    <div id="pagesUsers"></div>
    <script type="module">
      import request from "./request.js";
      // 如果未登录跳转登录页面
      if (localStorage.token === undefined) {
        location.href = "./login.html";
        throw "";
      }
      // 注销
      document.getElementById("btnLogin").onclick = function logout() {
        localStorage.removeItem("token");
        location.href = "./login.html";
      };

      const html = String.raw;
      function renderTable(data = []) {
        return html`<table class="table">
          <thead>
            <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>邮箱</th>
            </tr>
          </thead>
          <tbody>
            ${data
              .map(
                (el) => `
            <tr>
            <td>${el.name}</td>
            <td>${el.age}</td>
            <td>${el.email}</td>
          </tr>`
              )
              .join("")}
          </tbody>
        </table>`;
      }

      function renderPages(ativePage = 1, pageCount = 0) {
        const pages = Array.from({ length: pageCount }).map((el, i) => i + 1);

        return html` <ul class="pagination my-3">
          <li class="page-item ${ativePage === 1 ? "disabled" : ""}">
            <a class="page-link" href="#" data-page="${ativePage - 1}"
              >上一页</a
            >
          </li>
          ${pages
            .map(
              (el) =>
                html`<li class="page-item ${ativePage === el ? "active" : ""}">
                  <a class="page-link" data-page="${el}" href="#">${el}</a>
                </li>`
            )
            .join("")}

          <li class="page-item ${ativePage === pageCount ? "disabled" : ""}">
            <a class="page-link" href="#" data-page="${ativePage + 1}"
              >下一页</a
            >
          </li>
        </ul>`;
      }

      async function getUsers(page = 1) {
        const res = await request.get("/users", {
          params: {
            _page: page,
            _limit: 1,
          },
        });
        tableUsers.innerHTML = renderTable(res.data);

        // 计算总页码
        const totalCount = res.headers["x-total-count"];
        const pageCount = Math.ceil(totalCount / 1);

        pagesUsers.innerHTML = renderPages(+page, pageCount);
      }

      document.onclick = function (e) {
        const page = e.target.dataset.page;
        if (page === undefined) return;
        e.preventDefault();
        getUsers(page);
      };

      getUsers();
    </script>
  </body>
</html>
